
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="彩叶开发" />
<meta name="description" content="彩叶开发" />
<title>彩叶开发</title>
<link href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, h2, pre, input, textarea, p, iframe {padding:0; margin:0;} 
#top{
    height:40px;
    width:99%;
    background:#C8D7E3;
    }
#top input {
    background:yellow;
    color:#ff0000;
    width:180px;
    height:30px;
    }
#code {
    float:left;
    width:99%;
    height:400px;
    background:#2C587C;
    }
div h2 {
    float:left;
    line-height: 30px;
    color:#eee;
    font-size:14px;
    padding-left: 10px;
    }
#code2 textarea{
    float:left;
    left:0px;
    padding:5px 0 0 5px;
    /*border-right: 1px solid #808080;*/
    width:100%;
    overflow:auto;
    height:95%;
  
    }
#result  {
    float:left;
    width:99%;
    background:#880000;
    }
#result iframe{
    width:99%;
    height:500px;
    background:#fff;
    border:0px;
    border-left: 1px solid #808080;
   
	overflow: auto;
    }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>

</head>
<body id="editor" style="background-color:#2C587C;">
	<script src="../gj.js"></script><div style="background-color:#669900;font-size:24px;color:white;left:0;top:0;position:fixed;width:100%; z-index: 999;" align="center">
	<a style="margin-left:10px;margin-top:5px;float:left;color:white;font-size:17px" href="../">返回</a>彩叶开发(测试版)</div> <br /> <br />
<div id="test">
<div id="top">
<p><span><input name="button" type="button" onclick="runCode()" value="运行代码"></input></span><span></span></p>
</div>
<div id="code">
<h2>编辑您的代码：</h2>
<pre id="code2" class="ace_editor" style="height:350px; clear:both;"><textarea name="c" id="c" class="ace_text-input">
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>html css js在线测试工具</title>
<link rel="stylesheet" type="text/css" href="http://#" />         <!--可引用外部css-->
<script type="text/javascript" src="http://#" ></script>          <!--可引用外部JS，以及jquery等库-->
                                                                  <!-- 各种JS库的引用地址：www.bootcdn.cn -->
<script>
        /* 自写js */
</script>
<style>
        /* 自写css */
</style>

</head>
<body>

        <h2>彩叶开发</h2>
        <h4>所见即所得！</h4>
        <h4>配有html智能补全</h4>

</body>
</html>
</textarea></pre>

        <script>
            //初始化对象
            editor = ace.edit("code2");
            
            //设置风格和语言（更多风格和语言，请到github上相应目录查看）
            theme = "monokai"
            language = "html"
            editor.setTheme("ace/theme/" + theme);
            editor.session.setMode("ace/mode/" + language);
            
            //字体大小
            editor.setFontSize(12);
            
            //设置只读（true时只读，用于展示代码）
            editor.setReadOnly(false); 
            
            //自动换行,设置为off关闭
            editor.setOption("wrap", "free")
            
            //启用提示菜单
            ace.require("ace/ext/language_tools");
            editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true
                });
        </script>
</div>
<div id="result">
<h2>查看结果:</h2>
<p><span><input name="button" type="button" onclick="newWin()" value="新窗口打开"></input></span></p>
<iframe name="i" id="i" src=""></iframe>
</div>

</div>

</body>
</html>
<script type="text/javascript">
//JQuery UI 设置拖拽对象
$(function() {
  $( "#code" ).resizable();
});
//关联div 的变化逻辑函数
function change(){
  var winW = document.body.clientWidth;
  var divW = document.getElementById("code").offsetWidth;
  var newdivW = winW - divW + "px";
  var divH = document.getElementById("code").offsetHeight;
  var newdivH = divH-30 + "px";
  qzh = divH-60+"px";
  $("#c").css("height",newdivH);
  $("#result").css("width",newdivW);
  $("#code2").css("height",qzh);
  //editor.resize(); //触发ACE显示区尺寸缩放
}


//监视div变化,运行函数
//$("#code").resize(function(){
//change();
//});

//监视浏览器窗口变化,运行函数
//$(document).ready(function(){
//$(window).resize(function(){
//change();
//});
//});
//源代码获取、运行
function runCode() {
//obj = document.getElementById("c"); //textarea有value值
//obj = document.getElementById("c").innerHTML;  //可获取任何内容
var obj = editor.getValue();
if(obj==""){
alert("请输入要运行的代码内容");
return false;}
var winname = document.getElementById("i").contentWindow;
winname.document.open('text/html', 'replace');
winname.document.writeln(obj);
//winname.document.writeln(obj);   //配合innerHTML获取的内容使用。
winname.document.close();
}

//新开窗口运行
function newWin() {
//obj = document.getElementById("c"); 
var obj = editor.getValue();
if(obj==""){
alert("请输入要运行的代码内容");
return false;}
var newWin = window.open('','','');
newWin.opener = null; // 防止代码对论谈页面修改
newWin.document.write(obj);
newWin.document.close();
}
runCode();
</script>